<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>用户常用命令库</title>
		<link rel="stylesheet" href="../css/css.css">
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<link type="text/css" rel="Stylesheet" href="../css/generalCMD.css" />
		<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="../js/messagecenter.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript" src="../js/initPage.js"></script>
		<style type="text/css">
		.app_text{
		  color:#04A0E9;
		  cursor:pointer;
		  margin-left:20px;
		}
		.app_text1{
			color:#04A0E9;
		  	cursor:pointer;
		}
		.page-split input{
			display:inline;	
			margin:0px 4px;
		}
		.app_del{
		  cursor:pointer;
		  margin-left:20px;
		}
		.text_color{
			color:#A6A6A6;
			text-align: left;
			text-indent: 12px;
		}
		.text_name{
			text-align:left;
			text-indent: 12px;
		}
		.app_no{
			    background-color: #83BE00;
			    width: 50px;
			    height: 18px;
			    margin-left: 16%;
			    text-indent: 7px;
			    border-radius: 4px;
			    color: #FFFFFF;
		        font-weight: 600;
   			 	padding-top: 2px;
		}
		#page ul li a{
			margin:0 10px;
		}
	</style>	
	</head>
	<body>
	<div class="left_content">
		<div class="left_block1">
			<div class="left_logo"></div>
			<div class="left_title">品牌数据库编辑器，高效工作，人性化交互</div>
			<div class="left_icons">
				<div class="left_icon1"></div>
				<div class="left_icon2"></div>
				<div class="left_icon3"></div>
			</div>
		</div>
		<div class="left_block2">
			<div class="left_menu">拓扑文件库</div>
			<div class="left_menu">逻辑预案库</div>
			<div class="left_menu">部署库</div>
			<div class="left_menu">监控</div>
			<div class="left_menu">其他</div>
		</div>
		<div class="left_block3">
			<div class="left_title">快捷管理机箱、板卡、芯片，提高工作效率便捷查找功能相关物理和逻辑链接，高效编辑请登陆BDE账号</div>
			<button class="login">登录</button>
		</div>
	</div>
	<div class="right_content" >
			<form id="form1">
				<input type="hidden" id="curIndex" value="0"/>
				<input type="hidden" id="maxPage" value="0"/>
				<input type="hidden" id="curId" name="curId">
					<div class="top-bar">	
						<div style="float:left;">用户常用命令库<br>
							<span  class="text_color"  style="font-size: 13px;">General&nbsp;command&nbsp;library</span>
						</div>

						<div class="top_input" style="float:right; height:36px;margin-top: 12px;">
							<div>
								<select class="chtype" id="condition1">
									<option value="0" select>选择类型筛选</option>
									<option value="1">1</option>
									<option value="2">2</option>
								</select>
							</div>
			      			<button class="search">搜索</button>
							<input class="s_input" type="text" id="condition2" placeholder="输入关键字搜索"/>
						</div>	
					</div>
					<!-- -->
					<div class="table-box" >
						<div class="headerTableDiv">
							<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
								<colgroup>
									<col width="10%">
									<col width="10%">
									<col width="32%">
									<col width="15%">
									<col width="23%">
									<col width="10%">
								</colgroup>
								<tr>									
									<td>
										<div class="text_name" style="">编号</div>
										<div class="text_color">Serial&nbsp;number</div>
									</td>
									<td>
										<div class="text_name" style="">类型</div>
										<div class="text_color">Type</div>
									</td>
									<td>
										<div class="text_name" style="">命令</div>
										<div class="text_color">The&nbsp;command</div>
									</td>
									 <td>
										<div class="text_name" style="">最近执行时间</div>
										<div class="text_color">Recent&nbsp;execution&nbsp;time</div>
									</td>
									<td>
										<div class="text_name" style="">备注</div>
										<div class="text_color">note</div>
									</td>
									<td>
										<div class="text_name"style="">操作</div>
										<div class="text_color" style="">operation</div>
									</td>
								</tr>	
							</table>
						</div>
						<div class="contentTableDiv">
							<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;" >
								<colgroup>
									<col width="10%">
									<col width="10%">
									<col width="32%">
									<col width="15">
									<col width="23%">
									<col width="10%">
								</colgroup>
							<tbody id="contentTableTbody"></tbody>
							</table>
						</div>					 
				</div>				
				<!-- 分页 -->
				<div class="page-split">
					<div id="page"></div>

					<div class="page_count text_color" style="float:right;font-size:13px;">共96条/11页</div>
				</div>
				<!-- 底部 -->
				<div class="bottom">
					<div class="f0">
			          <div>编辑</div>
			          <div style="color:#DBDDDC;">Edit</div>
			        </div>
			        <div class="edit" style="height:150px;">
			        	<div class="f1">
							<div>类型&nbsp;:</div>
							<div>
								<select id="newType">
									<option value="0" selected>选择类型</option>
									<option value="1">1</option>
									<option value="2">2</option>
								</select>

							</div> 
						</div>
						<div class="f2">
							<div>备注&nbsp;:</div>
							<div><input id="newNote" type="text" placeholder="输入备注信息" value=""></div>
						</div>
						<div class="f3">
							<div>命令&nbsp;:</div>
							<div style="width:90%;"><textarea id="newCommand" class="contentTextTextArea2" placeholder="输入命令内容"></textarea></div>
						</div>
			        </div>
			      <div class="bt-btn" style="position: absolute;width:100%;bottom:20px;left:10px;">
			      	<button class="btn-s" type="button" onclick="connect()">立即执行</button>
			      	<button class="btn-s" type="button" onclick="update()" >保存</button>
			      </div>
				</div>		
			</form>
		</div>

	</body>
	<script type="text/javascript">
		$(".ex_reset").on("click",function(){
		    $(".pop_excute").hide();
		});
        $(function(){
            $(".search").on("click",function(){
                alert("搜索");
                var curIndex = $("#curIndex").val();
                var name_like1 = $("#condition1").val();
                var name_like2 = $("#condition2").val();
                alert(name_like1+name_like2);
                getList(curIndex,name_like1,name_like2);
            });
        });

	/*加载列表*/
	$(function(){
		/*var curIndex=$("#curIndex").val();
		getList(curIndex);
*/
        $("#newType").val("0");
        $("#newCommand").val("");
        $("#newNote").val("");

		var dataArr = [];
	 	for(i=1;i<=20;i++){
			var dataJson = {};
			dataJson.id = i;
			if(i<10){
				dataJson.no= "NO.0"+i;
			}else{
				dataJson.no = "NO."+i;
			}
			dataJson.type = "string"+i;
			dataJson.command = "string"+i;
			dataJson.recentTime= i;
			dataJson.note= "string"+i;
			dataArr.push(dataJson);
		} 
		addData(dataArr,25,990);

	});


	function edit(id){
            alert("编辑加载数据到下面");
            alert(id);
            if(id==null) {
                alert("id不能为空!");
                return false;
            }
            /*var url = "deploy_topology/query";
           $.post(url,{id:id},"JSON").done(function(data){
               if(data){
					 $("#curId").val(id);
					$("#newType").val(type);
					$("#newCommand").val(command);
					$("#newNote").val(note);
                   }else{
                   alert("未知错误");
               }
           });*/
            /*==============================================*/
		$("#newType").val("1");
		$("#newNote").val("222222222");
		$("#newCommand").val("33333");

		}
        function connect(){
            alert("立即执行");
        }
        function update(){
            alert("保存");
            var url="update";
            var parms={
                id:  $("#curId").val(),
                type:  $("#newType").val(),
                command:   $("#newCommand").val(),
                note:	$("#newNote").val()
            };
            alert(parms.type+parms.command+parms.note);
            /*$.post(url,parms,"JSON").done(function(data){
                if(data){
                    alert("更新成功");
                    window.location.href="html/generalCMD.html"
                    $("#newType").val("");
                    $("#newCommand").val("");
                    $("#newNote").val("");
                }
            });*/
        }
	function delete2(id){
		alert("删除");
		alert(id);
		if(id==null){
			aler("id不能为空!");
			return false;
		}
		var url="user_common_command/delete";
		$.post(url,{id:id},"JSON").done(function(data){
			if(data){
				window.location.href="../html/commonCMD.html";
			}
		});
	}
	/*列表内容*/
	function addData(data,pageSize,total){
	    var maxPage=Math.ceil(total/pageSize);
	    pageCal(1,maxPage,total);
	    $("#maxPage").val(maxPage);
		$("#contentTableTbody").empty();
		var html = '';
		$.each(data,function(k,v){
			html += '<tr>';
			html += '<td><div id="no" class="app_no">'+v.no+'</div></td >';
			html += '<td><div id="type" class="app_text1" style="cursor:default;">'+v.type+'</div></td>';
			html += '<td style="text-indent: 0px;"><div id="command" class="text_color">'+v.command+'</div></td>';
			html += '<td ><div>'+v.recentTime+'</div></td>';
			html += '<td ><div id="note">'+v.note+'</div></td>';
			html += '<td style="text-indent: 0px;">';
			html += '<a class="app_text edit" onclick="edit('+v.id+');">编辑</a>';
			html += '<a class="app_del" onclick="delete2('+v.id+');">删除</a>';
			html += '</td>';
			html += '</tr>';
		});
		$("#contentTableTbody").append(html);
	}
	/*function getList(curIndex,name_like1,name_like2){
		/*var url = "deploy_topology/query";
		$("#curIndex").val(curIndex);
		var param = {params:{name_like:[name_like1,name_like2]},pageable:{page:0,start:0,size:25}};
		$.post(url,param,"JSON").done(function(data){
			if(data){
				var dataList = data.data;
				   if(dataList&&dataList.length>0){
					addData(dataList,data.total,25)
				}
			}
		});
	}*/

	function tableSum() {
		$(".contentTableDiv2").scrollTop(10);// 控制滚动条下移10px
		if ($(".contentTableDiv2").scrollTop() > 0) {
			var scrollWidth = getScrollbarWidth();
			$(".contentTableDiv2").css("right",(20-scrollWidth)+"px");
		} else {
			$(".contentTableDiv2 table").css("width", "100%");
		}
		$(".contentTableDiv").scrollTop(0);// 滚动条返回顶部 
	}
	
	$(function(){
		tableSum();
	});

	$(window).resize(function() {
		tableSum();
	});
	
	function getScrollbarWidth() {
	    var odiv = document.createElement('div'),//创建一个div
	        styles = {
	            width: '100px',
	            height: '100px',
	            overflowY: 'scroll'//让他有滚动条
	        }, i, scrollbarWidth;
	    for (i in styles) odiv.style[i] = styles[i];
	    document.body.appendChild(odiv);//把div添加到body中
	    scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;//相减
	    odiv.remove();//移除创建的div
	    return scrollbarWidth;//返回滚动条宽度
	}
	/*分页*/

	function pageCal(curIndex,pageCount,totalCount){
		pageUtil.initPage('page',{
			totalCount:pageCount,//总页数，一般从回调函数中获取。如果没有数据则默认为1页
			curPage:curIndex,//初始化时的默认选中页，默认第一页。如果所填范围溢出或者非数字或者数字字符串，则默认第一页
			showCount:9,//分页栏显示的数量
			pageSizeList:[5,10,15,20,25,30],//自定义分页数，默认[5,10,15,20,50]
			defaultPageSize:1,//默认选中的分页数,默认选中第一个。如果未匹配到数组或者默认数组中，则也为第一个
			isJump:false,//是否包含跳转功能，默认false
			isPageNum:false,//是否显示分页下拉选择，默认false
			isPN:true,//是否显示上一页和下一面，默认true
			isFL:false,//是否显示首页和末页，默认true
			jump:function(curPage,pageSize){//跳转功能回调，传递回来2个参数，当前页和每页大小。如果没有设置分页下拉，则第二个参数永远为0。这里的this被指定为一个空对象，如果回调中需用到this请自行使用bind方法
				console.log(curPage,pageSize);
			},
		});
		$(".page-split .page_count").html('共'+totalCount+'条/'+pageCount+'页');
	}
	
	</script>
</html>
